<template>
	<view class="debug-container">
		<view class="line">
			studentInfo==> {{initMessage(studentInfo,true)}}
		</view>
		<view class="line mt20">
			params==> {{initMessage(params,true)}}
		</view>
		<view class="line mt20">
			state==> {{initMessage(state)}}
		</view>
		<view class="line mt20">
			beat==> {{initMessage(beat)}}
		</view>
	</view>
</template>

<script>
	import state from '@/config'
	export default {
		name: 'debug',
		props: {
			params: {
				type: Object,
				default: function() {
					return {};
				}
			},
			studentInfo: {
				type: Object,
				default: function() {
					return {};
				}
			},
			state: {
				type: Object,
				default: function() {
					return {};
				}
			},
			beat: {
				type: Object,
				default: function() {
					return {};
				}
			},
		},
		data() {
			return {
				isDebug: state.isDebug,
			};
		},
		methods: {
			initMessage(m, t = false) {
				if (t) {
					for (let k in m) {
						switch (k) {
							case 'remark':
							case 'url':
							case 'coverUrl':
							case 'courseSectionResourceRef':
							case 'courseSections':
							case 'name':
							case 'resourceName':
							case 'playNext':
							case 'startTime':
							case 'modifyTime':
							case 'lastTime':
							case 'updateTime':
							case 'poster':
								delete m[k];
						}
					}
				}
				return JSON.stringify(m)
			}
		}
	};
</script>

<style scoped>
	.debug-container {
		width: 100vw;
		height: 860rpx;
		display: block;
		top: 0rpx;
		left: 0;
		z-index: 99;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		overflow-y: auto;
	}

	.mt20 {
		margin-top: 20rpx;
	}

	.line {
		white-space: pre-wrap;
		word-break: break-all;
		word-wrap: break-word;
	}
</style>
